<template>
  <div>
    <w-section title="AES">
      <el-button size="mini" type="primary" @click="popBtnClick('encode')">加 密</el-button>
      <el-button size="mini" type="primary" @click="popBtnClick('decode')">解 密</el-button>
    </w-section>

    <!--提示框-->
    <el-dialog :title="form.type == 'encode' ? '加密' : '解密'" :visible.sync="isShow" width="800px">
      <el-form ref="form" :model="form" label-width="60px">
        <el-form-item label="Input">
          <el-input v-model="form.value" type="textarea"/>
        </el-form-item>
        <el-form-item v-if="form" label="Key">
          <el-input v-model="form.key" type="textarea"/>
        </el-form-item>
        <el-form-item v-if="form.data" label="Data">
          <el-card :body-style="{ padding: '0px 15px' }" class="box-card">
            <span class="text-warp">{{ form.data }}</span>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="!form.key || !form.value"
            class="float-right"
            style="margin-left: 20px"
            size="mini"
            type="primary"
            @click="okBtnClick"
          >确 定</el-button>
          <el-button size="mini" class="float-right" @click="isShow = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import WSection from "../../components/section.vue";
import API from "@/api/apis";
import { post } from "@/api/ajax";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    WSection
  }
})
export default class WebToolCryptoAes extends Vue {
  isShow = false;
  form = {
    type: "",
    key: "",
    value: "",
    data: ""
  };
  title = "";

  popBtnClick(type: string) {
    this.form.key = "";
    this.form.value = "";
    this.form.data = "";
    this.form.type = type;
    this.isShow = true;
  }
  okBtnClick() {
    post(API.coding.aes, {
      key: this.form.key,
      type: this.form.type,
      input: this.form.value
    })
      .then((data: any) => {
        this.form.data = data;
      })
      .catch(() => {});
  }
}

</script>

<style scoped>
</style>
